<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>过滤器</title>
        <script src="../js/vue.js"></script>
        <!-- 引入日期格式化的JavaScript -->
        <script src="../js/dayjs.min.js"></script>
    </head>
    <body>
        <!-- 
            过滤器:
                定义:对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
                语法:
                    1.注册过滤器: Vue.filter(name,callback)或new Vue({filters:{}})
                    2.使用过滤器:{{xxx│过滤器名}}或v-bind:属性="xxx│过滤器名"
                备注:
                    1.过滤器也可以接收额外参数、多个过滤器也可以串联
                    2.并没有改变原本的数据,是产生新的对应的数据 
        -->

        <div id="app">
            <h2>格式化后的时间</h2>
            <!-- 计算属性实现 -->
            <h3>现在是：{{ftmTime}}</h3>
            <!-- method实现 -->
            <h3>现在是：{{getFmtTime()}}</h3>
            <!-- 过滤器实现 -->
            <h3>现在是：{{time | timeFormatter}}</h3>
            <!-- 过滤器实现(传参) -->
            <h3>现在是：{{time | timeFormatter('YYYY_MM_DD')}}</h3>
            <!-- 过滤器(串联) -->
            <h3>现在是：{{time | timeFormatter('YYYY_MM_DD') | mySlice}}</h3>
        </div>
        
        <div id="app2">
            <h2>{{message | mySlice}}</h2>
        </div>
        <script>
            //配置好全局配置之后再创建Vue实例,关闭Vue的生产提示标识
            Vue.config.productionTip = false;
            // 定义全局过滤器
            Vue.filter('mySlice',function(value){
                return value.slice(0,4);
            });

            var vm = new Vue({
                el:'#app',
                data:{
                    time: 1634105513335// 时间戳
                },
                methods:{
                    getFmtTime(){
                        return dayjs(this.time).format("YYYY年MM月DD日 HH点mm分ss秒");
                    }
                },
                computed: {
                    ftmTime(){
                        return dayjs(this.time).format("YYYY年MM月DD日 HH点mm分ss秒");
                    }
                },
                // 局部过滤器
                filters: {
                    timeFormatter(value,str='YYYY年MM月DD日 HH点mm分ss秒'){
                        return dayjs(value).format(str);
                    }
                }
            });

            new Vue({
                el: '#app2',
                data: {
                    message: 'hello,atguigu'
                }
            });
        </script>
    </body>

</html>